<template>
    <!-- <h1>预支付preOrder</h1> -->
    <div>
        <h1>确认订单</h1>
           <el-table  :data="yufu" style="width: 100%">
                <el-table-column prop="description" label="充值产品" width="380"></el-table-column>
                <el-table-column prop="price" label="单价" width="280"></el-table-column>
                <el-table-column prop="date" label="数量" width="280">
                    <template v-slot="{ row }">
                    <el-input-number  v-model="buynum"  :min="1" :max="1000000" label="描述文字"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="小计" width="280">
                    {{jieguo}}
                </el-table-column>
           </el-table>

           <div class="shop">
                <div class="shopbox">
                    <div>实付款:{{jieguo}}</div>
                    <div>充值详情{{yufu[0].description}}</div>
                    <div>充值账号</div>
                </div>
                <el-button type="danger" width='100' @click="subdd">提交订单</el-button>
           </div>
    </div>

</template>

<script>
import * as api from '../../../api/vipdd'
export default {
    data() {
        return{
            // 接收的信息
            yufu:[],
            buynum:1,
            product_id:''
        }
    },

    computed:{
        jieguo(){
            return this.yufu[0]?.price * this.buynum
        }
    },

    created(){
        let {product_id} = this.$route.query
        this.product_id = product_id
        // console.log(product_id);
        api.yuzhifu(product_id)
        .then((res)=>{
            console.log('支付',res);
            this.yufu = res.data.data
        })
    },

    methods:{
        // 提交订单
        subdd(){
            
            this.$confirm('您是否确认购买' + this.yufu[0].description +'商品总价格为'+ this.jieguo , '确认订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
            api.xiadan(this.product_id,this.buynum)
            .then((res)=>{
                console.log('下单',res);
                if(res.data.state){
                    let {order_id} = res.data
                    this.$router.push({name:"home-payment-pay",query:{order_id}})
                }
            })
          
            // type: 'success',
            // message: '删除成功!'

        }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消删除'
          });          
        });
        }
       
    }
}
</script>


<style lang="less" scoped>
    .shop{
        width: 500px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: right;
        position: relative;
        .shopbox{
        border: 1px solid red;

        }
        .el-button{
            width: 100px;
            position: absolute;
            right: 0;
            top:65px
        }
    }
</style>